<script lang="ts" setup>
  import { ref } from 'vue'
  import OrderManagement from '@/api/Ordermanagement'
  import { QueryParams } from '@/types/public'
  import { getorderStatus, getorderType } from './data'
  import userService from '@/api/userService'


  //调用接口数据 extends?
  interface QueryonePay extends QueryParams {
    serviceTypeName?: any
    productionSpecDesc?: any
    orderStatus?: any
    price?: any
    orderType?: any
    orderExpiredTime?: any
    createdTime?: any
    userId: string
    orderId?: string
    timeRange: number
    total?: number
  }

  const queryonePay: QueryonePay = reactive({ userId: localStorage.getItem('userId') as string, timeRange: 0, page: 1, pageSize: 5, orderStatus: [6] })

  const getList = () => {
    OrderManagement.getOnePay(queryonePay).then((res) => {
      tableData.length = 0
      tableData.push(...res.data.data.order)
      queryonePay.total = res.data.data.totalCount
    })
  }
  getList()

  let tableData: Array<QueryonePay> = reactive([])

  const orderTypeFormat = function (cellValue: number) {
    let str = ''
    for (const key in getorderType) {
      if (Object.prototype.hasOwnProperty.call(getorderType, key)) {
        const element = getorderType[key]
        for (const k in element.child) {
          if (Object.prototype.hasOwnProperty.call(element.child, k)) {
            const val = element.child[k]
            if (cellValue === val.value) {
              str = val.text
            }
          }
        }
      }
    }

    return str
  }

  const findstatus = function (cellValue: any) {
    const status: any = getorderStatus[0].child.find((v: any) => v.value === cellValue)
    return status
  }

  const handleSizeChange = (val: number) => {
    queryonePay.page = 1
    queryonePay.pageSize = val
    getList()
  }
  const handleCurrentChange = (val: number) => {
    queryonePay.page = val
    getList()
  }

  const payInformation = reactive({
    userId: localStorage.getItem('userId') as string
  })
  const loading = ref(false)

  const goPay = (orderId: string) => {
    loading.value = true
    userService
      .goPay(payInformation.userId, orderId)
      .then((res) => {
        getList()
      })
      .finally(() => {
        loading.value = false
      })
  }


  const cancel = (orderId: string) => {
    loading.value = true
    userService
      .cancel(payInformation.userId, orderId)
      .then((res) => {
        getList()
      })
      .finally(() => {
        loading.value = false
      })
  }
</script>

<template>
  <div
    class="content-box"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(255, 255, 255, 0.7)"
    style="width: 100%"
  >
    <div class="login-title">
      <span>待支付订单</span>
      <div style="display: flex; align-items: center">
        <img style="margin-left: 10px" src="@/assets/svg/refresh.svg" />
      </div>
    </div>
    <div class="information-title">
      <div class="first">订单消息</div>
      <div class="second">订单类型</div>
      <div class="second">订单金额</div>
      <div class="second">优惠金额</div>
      <div class="second">应付金额</div>
      <div class="second">操作</div>
    </div>
    <div v-if="tableData.length == 0"><el-empty description="暂无数据" /></div>
    <div v-for="(data, index) in tableData" :key="index">
      <div class="order-box">
        <div class="order-number">
          <div style="display: flex; align-items: center">
            <span>创建时间：{{ timeFormathms(data.createdTime) }}</span
            ><span style="margin-left: 40px">订单号:&nbsp</span><el-link type="primary">{{ data.orderId }}</el-link
            ><el-icon style="margin-left: 6px">
              <CopyDocument />
            </el-icon>
          </div>
          <div class="order-number-right">订单到期时间：{{ timeFormathms(data.orderExpiredTime) }}</div>
        </div>
        <div class="order-content">
          <div class="left">
            <div style="margin-top: 16px">{{ data.serviceTypeName }}</div>
            <div style="margin-top: 16px">{{ data.productionSpecDesc }}</div>
          </div>
          <div class="right">
            <div style="margin-top: 16px">{{ orderTypeFormat(data.orderType) }}</div>
            <div class="grayfont-right">用户下单</div>
          </div>
          <div class="right">
            <div style="margin-top: 16px">￥ {{ data.price }}</div>
          </div>
          <div class="right">
            <div style="margin-top: 16px">￥ 50</div>
            <div class="grayfont-right">满1500减50</div>
            <div class="grayfont-right">优惠券：FDFE5451...</div>
          </div>
          <div class="right">
            <div style="margin-top: 16px; color: #ff7500; font-weight: 700">￥ {{ data.price }}</div>
          </div>
          <div class="right">
            <div><button class="blog" @click="goPay(data.orderId as string)">去付款</button></div>
            <el-link style="line-height: 34px; font-weight: 400" @click="cancel(data.orderId as string)">取消订单</el-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="pageselect">
      <el-pagination
        background
        :current-page="queryonePay.page"
        :page-size="queryonePay.pageSize"
        :page-sizes="[5, 10, 20, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryonePay.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .content-box {
    background: $blank-color;

    .pageselect {
      padding: 30px 30px;
    }

    .login-title {
      height: 69px;
      display: flex;
      padding: 0 30px;
      align-items: center;
      cursor: pointer;
      font-size: 18px;
      font-weight: 700;
      color: $text-color;
      justify-content: space-between;
    }

    .information-title {
      height: 34px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 18px;
      font-weight: 700;
      color: $text-color;
      background-color: #f6f7fa;
      margin-left: 30px;
      margin-right: 30px;

      .first {
        width: 40%;
        margin-left: 20px;
        font-size: 14px;
      }

      .second {
        font-size: 14px;
        flex: 1;
        text-align: center;
        height: 34px;
        line-height: 34px;
        border-left: 1px solid white;
      }
    }

    .order-box {
      height: 132px;
      margin-top: 20px;
      margin-left: 30px;
      margin-right: 30px;
      border: 1px solid #e7e9ef;
      font-size: 14px;

      .order-number {
        background-color: #f6f7fa;
        border-bottom: 1px solid #e7e9ef;
        height: 34px;
        line-height: 34px;
        display: flex;
        padding: 0 20px;
        justify-content: space-between;

        .order-number-right {
          color: #556279;
        }
      }

      .order-content {
        height: 98px;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        color: $text-color;

        .left {
          width: 40%;
          margin-left: 20px;
          font-size: 14px;
          height: 98px;

          .grayfont-left {
            color: #9198a4;
          }
        }

        .right {
          font-size: 14px;
          flex: 1;
          text-align: center;
          height: 98px;
          border-left: 1px solid #e7e9ef;

          .el-link:hover {
            color: #eb0101;
          }

          .el-link {
            color: #9198a4;
            --el-link-hover-text-color: #eb0101;
          }

          .grayfont-right {
            color: #9198a4;
          }

          .blog {
            width: 100px;
            height: 34px;
            margin-top: 16px;
            cursor: pointer;
            background-color: #ff7500;
            color: white;
            border: 0px;
          }
        }
      }
    }
  }
</style>
